import { ref } from "vue"
export const useFrameQuery = (map, docName) => {
  var service = {
    name: docName,
    layerId: 2,
  }
  let draw = ref(null)
  //创建画布
  let source = new ol.source.Vector({})
  let layer = new ol.layer.Vector({
    source,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        /* 填充色 */
        fill: new ol.style.Fill({
          color: "rgba(255, 0, 0,.9)",
        }),
        /* 描边 */
        stroke: new ol.style.Stroke({
          color: "skyblue",
          width: 2,
        }),
      }),
    }),
  })
  setTimeout(() => {
    map.value.addLayer(layer)
  }, 200)
  //查询获取数据
  const eventList = ref([])
  //定义变量激活画笔
  const drawFlag = ref(false)
  const frameQuery = () => {
    drawFlag.value = !drawFlag.value
    if (drawFlag.value) {
      //激活画笔
      draw.value = createDraw({
        type: "Rectangle",
        source,
        callback: handleDraw,
      })
      map.value.addInteraction(draw.value)
    } else {
      queryFlag.value = false
      map.value.removeInteraction(draw.value)
      source.clear()
    }
  }
  //定义变量显示弹框
  const queryFlag = ref(false)
  function handleDraw(e) {
    queryFlag.value = true
    var gemo = e.feature.getGeometry()

    // var gemo = e.feature.getGeometry()
    Query.queryByGeom({
      geometry: gemo,
      service,
      callback: (res) => {
        try {
          //初始化Zondy.Format.PolygonJSON类
          var format = new Zondy.Format.PolygonJSON()
          //将MapGIS要素JSON反序列化为ol.Feature类型数组
          var features = format.read(res)
          source.addFeatures(features)
          let filterres = JSON.parse(JSON.stringify(res))
          //拉框查询获取信息,需要FID,mpLayer,name
          if (eventList.value) {
            eventList.value = []
          }
          filterres.SFEleArray.forEach((item) => {
            // console.log(item)
            if (item.AttValue[7] == 0) {
              item.AttValue[7] = "未处理"
            } else if (item.AttValue[7] == 1) {
              item.AttValue[7] = "已忽略"
            } else {
              item.AttValue[7] = "已通过"
            }
            eventList.value.push({
              事件编号: item.AttValue[0],
              事件类型: item.AttValue[1],
              事件等级: item.AttValue[2],
              发生时间: item.AttValue[3],
              发生地点: item.AttValue[4],
              车牌号: item.AttValue[5],
              驾驶员: item.AttValue[6],
              处理状态: item.AttValue[7],
            })
          })
        } catch (error) {
          eventList.value = []
        }
      },
    })
  }
  return { frameQuery, eventList, queryFlag }
}
